10 - 循环列表

Vue使用v-for指令循环。

React直接用JS的map函数，遍历数组，在遍历的过程中把组件也遍历

首先定义一个Blogs列表

jsx

import { useState } from "react";

const Home = () => {
  const [blogs, setBlogs] = useState([
    { id: 1, title: 'today1', body: 'lorem1', author: 'mario1' },
    {id:2, title:'today2', body:'lorem2', author:'mario2'},
    {id:3, title:'today3', body:'lorem3', author:'mario3'},
  ]);


  return (  
    <div className="home">
    </div>
  );
}
 
export default Home;

然后写遍历

jsx

  return (  
    <div className="home">
      {blogs.map(x => (
        <div className="blog-preview" key={x.id}>
          <h2>{x.title}</h2>
          <p>{x.body}</p>
          <p>By { x.author}</p>
        </div>
      ))}
    </div>
  );

注意JSX的写法和原生JS的不同。

原生JS：

blogs.map(x=>{
	// ... 处理
}

JSX：

jsx

{blogs.map(x => (
	<div className="blog-preview" key={x.id}>
		<h2>{x.title}</h2>
		<p>{x.body}</p>
		<p>By { x.author}</p>
	</div>
))}

10 - 循环列表 ​

10 - 循环列表